<template>
  <div class="permission">
    <el-card>
      <!-- 头部按钮 -->
      <div class="btnbox">
        <el-button @click="openAdd(1, 0)" type="primary" size="mini">
          <i class="el-icon-edit"></i>添加菜单
        </el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="perlist" row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.type === 1"
              @click="openAdd(2, row.id)"
              type="text"
            >
              添加权限点
            </el-button>
            <el-button type="text">查看 api 权限</el-button>
            <el-button @click="openpanel(row.id)" type="text">查看</el-button>
            <el-button @click="delper(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑面板 -->
    <panel
      ref="mypanel"
      :panelShow.sync="panelShow"
      @updatedata="getAllPer"
    ></panel>
  </div>
</template>

<script>
import { getAllPerApi, delPerApi } from '@/api/permission'
export default {
  data () {
    return {
      // 权限列表
      perlist: [],
      // 控制面板的显示与隐藏
      panelShow: false
    }
  },
  methods: {
    // 打开新增面板
    openAdd (type, pid) {
      // 打开新增面板
      this.panelShow = true
      // 调用子组件中的设置属性方法
      this.$refs.mypanel.setprop(type, pid)
    },
    // 打开面板
    openpanel (id) {
      // 打开面板
      this.panelShow = true
      // 调用面板中的方法，得到当前要编辑的数据详情
      this.$refs.mypanel.getInfoById(id)
    },
    // 删除权限
    async delper (id) {
      try {
        // 询问问题是否删除
        await this.$confirm('是否删除当前权限点', '警告')
        // 删除 id 对应的权限点
        await delPerApi(id)
        // 提示成功
        this.$message.success('删除成功')
        // 更新数据
        this.getAllPer()
      } catch {
        console.log('出错或者取消')
      }
    },
    // 得到所有的权限
    async getAllPer () {
      try {
        const res = await getAllPerApi()
        // 保存权限数据
        this.perlist = this.trunData(res, '0')
      } catch {
        console.log('出错了')
      }
    },
    // 将权限列表数据转为树形结构
    trunData (arr, pid) {
      var newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          item.children = this.trunData(arr, item.id)
          newArr.push(item)
        }
      })
      return newArr
    }
  },
  created () {
    // 得到所有的权限
    this.getAllPer()
  },
  components: {
    panel: () => import('./components/panel.vue')
  }
}
</script>

<style lang="scss" scoped>
.permission {
  padding: 20px;
  .btnbox {
    text-align: right;
  }
}
</style>